{% load i18n %}
<!--
<link type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
-->

<script src="/static/lib/jquery.dataTables.min.js" type="text/javascript"></script>
<link type="text/css" href="/static/css/dataTables.bootstrap.css" rel="stylesheet"/>
<link type="text/css" href="/static/css/icon-font.css" rel="stylesheet"/>
<script src="/static/lib/dataTables.bootstrap.js"></script>

<script>
    var tabledata_data = []
    //var is_selected = false

    $(document).ready(function()
    {
        init_market_left()
        init_search()
    } );

    function init_market_left()
    {
        var data = {
            markets: g_markets
        };
        var key = g_coin0 + "2" + g_coin1
        for (i in data.markets) {
            info = data.markets[i]
            if (info.key == key){
                info.cur = true;
            } else {
                info.cur = false;
            }
        }
        //console.log("markets %s " , data.markets.length)
        var html = template("tmp_markets_left", data);
        document.getElementById("markets_left").innerHTML = html;
        init_market_datatable()
    }

    function init_market_datatable()
    {
        var table = $('#tbl_markets_left').DataTable({
            "paging": false, // 禁止分页
            "bInfo" : false, //是否显示页脚信息，DataTables插件左下角显示记录数
            // "bSort": false,     //定义的时候是否分
            "columnDefs": [ { "targets":[4], "visible": false } ],
            'language': {
            //search:' <span class=" search gray">Search <i class="fa fa-search"></i> <span>'
            },
            // "scrollY":"875px",
            // "scrollCollapse": true,
            "paging": false,
                "createdRow": function( row, data, dataIndex ) {
                    //对齐
                    $(row).children('td').eq(0).attr('style', 'text-align: center;')
                    $(row).children('td').eq(1).attr('style', 'text-align: left;color:#333;font-weight:normal;')
                    $(row).children('td').eq(2).attr('style', 'text-align: left;font-weight:normal;')
                    $(row).children('td').eq(3).attr('style', 'text-align: right;font-weight:normal;')
                },

            "dom": 't'
        });

        // $("#tbl_markets_left").on("click","tr",function(){//给tr或者td添加click事件
        // var data=table.row(this).data();//获取值的对象数据
        // window.location.href="/btc/trade?type=" +data[4]
        // });

        <!-- todo 添加 自选功能 -->
        $("#tbl_markets_left").on("click","tr td:nth-child(1)",function(e){//给tr或者td添加click事件
            var name = $(this).text();
            var data=table.row(this).data();
            var star = "<a class=\"yellow\"><i class=\"fa fa-star\"></i><a>"
          //  alert(data);
        });

        <!-- 下面3行功能一样的，就是点击导航到对应的交易对-->
        $("#tbl_markets_left").on("click","tr td:nth-child(2)",function(e){//给tr或者td添加click事件
            var data=table.row(this).data();//获取值的对象数据
            window.location.href="/btc/trade?type=" +data[4]
        });
        $("#tbl_markets_left").on("click","tr td:nth-child(3)",function(e){//给tr或者td添加click事件
            var data=table.row(this).data();//获取值的对象数据
            window.location.href="/btc/trade?type=" +data[4]
        });
        $("#tbl_markets_left").on("click","tr td:nth-child(4)",function(e){//给tr或者td添加click事件
            var data=table.row(this).data();//获取值的对象数据
            window.location.href="/btc/trade?type=" +data[4]
        });
    }

    function refresh_markets_left(jsonobj)
    {
        // Sort by column 1 and then re-draw
        //table.draw( false );
        $('#tbl_markets_left').dataTable().fnClearTable();
        $('#tbl_markets_left').dataTable().fnAddData(markets_left_pack_data(jsonobj), true); //刷下表格

        var table = $('#tbl_markets_left').DataTable();
        tabledata_data = table.rows().data()
        table.search('').draw();
    //    markets_left_pack_data(jsonobj)
    }

    function markets_left_pack_data(jsonobj)
    {
        // todo order by use_coin_type
        var data = []
        var exist_data = {}
        var star = "<a class=\"yellow\"><i class=\"fa fa-star\"></i><a>"
        var star2 = "<a class=\"yellow\"><i class=\"fa fa-star-o\"></i><a>"
        var markets = g_markets
        for (i = 0; i < jsonobj.length; i++) {
            var info = jsonobj[i];
            var key = info.coin_type + "2" + info.use_coin_type
            if (!markets[key])
            {
                continue
            }
            if (info.use_coin_type == 'bitcny') {
                var list = []
                var icon_img = g_coin_info[info.coin_type].icon_img
                list.push(star)
                //var td1 = "<img class=\"svg \"  src=\"" + icon_img +"\"/>&nbsp" + g_coin_info[info.coin_type].name_upper + "<span class=\"gray\">" +g_coin_info[info.coin_type].cname + "</span>"
                var td1 = g_coin_info[info.coin_type].name_upper + "/" + g_coin_info[info.use_coin_type].name_upper
                list.push(td1)

                var  td2 = curr
                var tofixed = coin_tofixed(g_coin0, g_coin1, coin_tofixed_type_price)
                var curr = floor_number(info.curr, tofixed)

                var percent = 0
                if (info.curr != info.open) {
                    percent = (info.curr - info.open) * 100 / info.open
                    percent = floor_number(percent, 2)
                }
                percent_html = "<span class=\"green\">0.00%</span>"
                if (percent > 0) {
                    percent_html = "<span class=\"red\">+"+percent+"%</span>"
                    list.push("<span class=\"red\">"+ curr + "</span>")
                } else {
                    percent_html = "<span class=\"green\">"+percent+"%</span>"
                    list.push("<span class=\"green\">"+ curr + "</span>")
                }

                list.push(percent_html)
                list.push(info.coin_type +"2"+info.use_coin_type)
                data.push(list)
                exist_data[info.coin_type+"2" + info.use_coin_type] = 1
            }
        }

        var markets = g_markets
        for (i in markets) {
            var info = markets[i]
            var key =  info.key
            if (exist_data[key] == 1) {
                continue
            }
            var list = []
            var coin_type = info.coin_type
            var icon_img = g_coin_info[info.coin_type].icon_img
            // var td1 = "<img class=\"svg \"  src=\"" + icon_img +"\"/>&nbsp" + g_coin_info[coin_type].name_upper + " <span class=\"gray\">" +g_coin_info[coin_type].cname + "</span>"
            var td1 = g_coin_info[info.coin_type].name_upper + "/" + g_coin_info[info.use_coin_type].name_upper
            list.push(star2)
            list.push(td1)
            list.push("0.00")
            list.push("0.00%")
            list.push(info.key)
            data.push(list)
        }
        //console.log("refresh_markets_left data "  + JSON.stringify(data))
        return data
    }
    // 重新刷新市场
    function get_market_left()
    {
        $.post("/btc/get_curr_market", {}, function(jsonobj) {
            //console.log("====get curr market return  ")
            $(".mkt-left-box li").removeClass('active');
            refresh_markets_left(jsonobj)
        })
    }

    // 监听搜索
    function init_search()
    {
        $("#search-text").keyup(function() {
            var search_key = $("#search-text").val()
            //console.log(search_key)
            var table = $('#tbl_markets_left').DataTable();
            table.search(search_key).draw();
        });
    }
</script>

<style>
    #markets_left {
        // border: 1px solid #e6e6e6; /* rgba(169,191,205 ,0.7);*/ /* 1px, solid 颜色 */
        font-family: 'Arial',"Microsoft YaHei", sans-serif;
        font-size: 12px;
        color: #333;
        overflow-y:scroll;
        height:1000px;
    }
    #tbl_markets_left thead th {font-weight:normal!important;}
    #tbl_markets_left tr:hover {font-weight:bold;}
    #tbl_markets_left tr {font-size: 12px;height:12px;}
    #tbl_markets_left td {font-size: 12px;height:12px;}
    #tbl_markets_left td img {
        float:left;
        width:12px;
        height:12px;
    }

    #tbl_markets_left  {
        text-align: center!important;
    }
    .dataTables_filter input {
        // height:20px!important;
    }

    aTable tbody th, table.dataTable tbody td {
        padding: 2px 2px;
        font-weight: bold;
    }
    .dataTables_scrollBody::-webkit-scrollbar {width:5px;}

    #tbl_markets_left_filter {
        margin:10px 0px 0px 0px;
    }
    #tbl_markets_left_filter .search {
        margin:0px 0px 0px 20px;
        }
    #tbl_markets_left_filter input {
        width: 120px;
        height: 22px;
        line-height: 22px;
        border: 1px solid #d4d4d4;
    }

/*--begin by xiaolin--*/
    .mkt-left-box{
        border: 1px solid #e6e6e6; /* rgba(169,191,205 ,0.7);*/ /* 1px, solid 颜色 */
        margin: 0px 5px 0px 0px;
        height: 1069px;
        padding: 0;
        box-sizing: inherit;
    }
    .mkt-header{
        vertical-align: middle;
        background-color: #f4f4f4;
        margin: 0;
        padding: 0;

    }
    .mkt-tab-box{
        display: block !important;
        height: auto;
        overflow: hidden;
        margin: 0px 4px 0px 4px;
        list-style-type: none;
        padding: 3px 0;
    }
    .mkt-tab-box  li{
        font-size: 12px;
        padding: 2px 3px;
        display: block;
        border: 1px solid #e6e6e6;
        cursor: pointer;
        margin-right: 4px;
        background: #fff;
    }
    .mkt-tab-box li span{
        font-size: 12px;
    }
    .f-nomargin{
        margin: 0!important;
    }
    .mkt-left-box li.active {
        border-color: #f3ba2f;
        background: #fff9e7;
        color: #e8b342;
    }
    .mkt-tab-box li span:before{
        //content: "\e65a";
    }

    /*----*/
    .mkt-search{
        background: #fff;
        display: block!important;
        padding: 4px;
        vertical-align: middle;
    }
    .mkt-search *{
        // vertical-align: middle;
        display: inline-block;
    }
    .search-box input{
        height: 25px;
        line-height: 25px;
        border: 1px solid #d4d4d4;
        width: 96px;
        background: url(/static/images/search-ico.png) no-repeat 5px center #fff;
        padding: 0 5px 0 22px;
        border-radius:0px;

    }
    .search-box input:focus{
        border: 1px solid #e8b342;
        box-shadow:none;
    }
    .mkt-search .fr label {
        line-height: 25px;
    }
    .mkt-search:after{
        display: block;
        clear: both;
        visibility: hidden;
        height: 0;
        overflow: hidden;
        content: ".";
    }
    .mkt-search .f-fr label{
        line-height: 25px;
    }
    .radio {
        cursor: pointer;
        margin-right: 9px!important;
        font-size: 12px;
        color: #888;
        //vertical-align: surper;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .radio input[type=radio] {
        display: none;
    }
    .radio input[type=radio]+span {
        display: inline-block;
        vertical-align: text-top;
        width: 13px;
        height: 13px;
        background: url(/static/images/radio.png)no-repeat -71px 0px;
        margin-right: 4px;
    }
    .radio input[type=radio]:checked+span {
        background-position: 0 0px;
    }
/*--end by xiaolin--*/

::-webkit-scrollbar-track{background-color:#FFF;}
::-webkit-scrollbar-thumb{background-color:#FFF;}
::-webkit-scrollbar-thumb:active {background-color:#C2C2C2}

</style>

<script>
    function str_cmp(key1, key2) {
        var arr = key1.split('2')
        //console.log("str_cmp")
        //console.log(arr)
        if (arr.length != 2) {
            return false
        }
        //console.log("key1 key2")
        //console.log(arr)
        //console.log(key2)
        if (arr[1] == key2) {
            console.log("ret returnh")
            return true
        }
    }

    function filter_coins(arg)
    {
        var search_key = arg
        var table = $('#tbl_markets_left').DataTable();
        var old_data = table.rows().data()

        var data = tabledata_data
        var is_selected = true

        if (old_data.length == data.length) {
            is_selected = false
        }
        /*
        if (is_selected) {
            newdata = []
            for (i = 0; i < data.length; i++) {
                row = data[i]
                newdata.push(row)
            }
            $('#tbl_markets_left').dataTable().fnClearTable();
            $('#tbl_markets_left').dataTable().fnAddData(newdata, true); //刷下表格
            return
        }
        */

        newdata = []
        for (i = 0; i < data.length; i++) {
            row = data[i]
            //console.log(row[1])
            if (str_cmp(row[4], arg)) {
                newdata.push(row)
            }
        }
        $('#tbl_markets_left').dataTable().fnClearTable();
        $('#tbl_markets_left').dataTable().fnAddData(newdata, true); //刷下表格
    }
</script>

<div class="mkt-left-box">
    <div class="mkt-header">
        <ul class="mkt-tab-box">
            <li class="f-fl active"><span class="iconfont icon-xingxing">{%trans '自选' %}</span></li>
            <li class="f-fr f-nomargin" onclick="filter_coins('btc')">BTC</li>
            <li class="f-fr" onclick="filter_coins('eth')">ETH</li>
            <li class="f-fr" onclick="filter_coins('usdt')">USDT</li>
            <li class="f-fr" onclick="filter_coins('bitcny')">BitCNY</li>
        </ul>
        <div class="mkt-search">
            <div class="search-box f-fl">
                <input type="text" id="search-text" class="">
            </div>
            <div class="f-fr">
                <label class="radio">
                    <input type="radio" checked="checked" name="mkt-change" class="">
                    <span></span>{%trans '涨跌' %}
                </label>
                <!--
                <label class="radio">
                    <input type="radio" name="mkt-change" class="">
                    <span></span>成交量
                </label>
                -->
            </div>
        </div>
    </div>
    <div id="markets_left"></div>
</div>


<script id="tmp_markets_left" class="" type="text/html">
    <table id="tbl_markets_left" class="table-hover table-striped " cellspacing="0" width="100%">
        <thead>
        <tr>
            <th style="width:10%;color:#999"  class=""></th>
            <th style="width:20%;color:#999"  class=" f-left">{%trans '市场' %}</th>
            <th style="width:26%;color:#999"  class=" f-left">{%trans '最新' %}</th>
            <th style="width:26%;color:#999"  class=" f-right">{%trans '涨跌' %}</th>
            <th  class="gray-a">隐藏</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td></td>
            <td id="left_curr_price">coin_type_upper</td>
            <td>xx</td>
            <td id="percent"></td>
            <td id="hidden"></td>
        </tr>
        </tbody>
    </table>
</script>
<script>
    $(function(){
        $('.mkt-tab-box').find('li').click(function(){
            var index = $(this).index();
            $(this).addClass('active').siblings().removeClass('active');
        })
    })
</script>

